<script setup lang="ts">

import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import {showFailToast, showSuccessToast} from "vant";
import myAxios from "../plugins/myAxios.ts"
import qs from "qs"
import UserCardList from "../components/UserCardList.vue";

const route = useRoute();
const {tags} = route.query;
const userList = ref([])

onMounted(async() => {
  const userListData = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags
    },
    paramsSerializer: params => {
      return qs.stringify(params, { indices: false})
    }
  })
      .then(function (response) {
        console.log('/user/search/tags succeed', response);
        return response?.data;
      })
      .catch(function (error) {
        console.log('/user/search/tags error', error);
        showFailToast('请求失败');
      })
  if (userListData) {
    userListData.forEach(user => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags)
      }
    })
    userList.value = userListData;
  }
})
// const mockUser = {
//   id: 12345,
//   username: "天晴",
//   userAccount: 'John',
//   avatarUrl: 'https://cdn-img.gitcode.com/df/bf/32d273266f02b82942facf44873448fdd81546f8e483234dfaf413f6fe009a7b.png',
//   gender: 0,
//   profile: '一名精神小伙，目前还有头发，谢谢大家',
//   phone: '12345',
//   email: 'John@qq.com',
//   userStatus: 0,
//   userRole: 0,
//   planetCode: '12345',
//   tags: ['Java', 'emo', '打工中'],
//   createTime: new Date(),
// }


</script>

<template>
  <user-card-list :user-list="userList" />
  <van-empty v-if="userList.length < 1" description="搜索结果为空" />
</template>

<style scoped>

</style>
